<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>$i18n{title}</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
  <script type="module" src="reset_password.js"></script>
  <style>
    html {
      font-size: 125%;
    }

    body {
      background-color: white;
      color: var(--google-grey-700);
      font-family: system-ui;
      font-size: 75%;
      word-wrap: break-word;
    }

    p {
      font-size: 1em;
      line-height: 1.6em;
    }

    button {
      background: var(--google-blue-500);
      border: 0;
      border-radius: 2px;
      box-sizing: border-box;
      color: white;
      cursor: pointer;
      float: right;
      font-size: .875em;
      margin: 0;
      padding: 10px 24px;
      transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
    }

    [dir='rtl'] button {
      float: left;
    }

    button:active {
      background: var(--google-blue-700);
      outline: 0;
    }

    button:hover {
      box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
    }

    .icon {
      height: 72px;
      margin: 0 0 40px -8px;
      width: 72px;
    }

    .heading {
      color: var(--paper-grey-800);
      font-size: 1.6em;
      font-weight: normal;
      line-height: 1.25em;
      margin-bottom: 16px;
    }

    .page-wrapper {
      box-sizing: border-box;
      line-height: 1.6em;
      margin: 14vh auto 0;
      max-width: 600px;
    }

    .nav-wrapper {
      margin-top: 51px;
    }

    /* Responsive layouts when resizing to different sizes.*/
    @media (max-width: 700px) {
      .page-wrapper {
        padding: 0 10%;
      }
    }

    @media (max-width: 420px) {
      .page-wrapper {
        padding: 0 5%;
      }
      .nav-wrapper {
        margin-top: 30px;
      }
    }

    @media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
      .page-wrapper {
        margin-top: 10vh;
      }
    }

    @media (min-height: 400px) and (orientation:portrait) {
      .page-wrapper {
        margin-bottom: 145px;
      }
    }

    @media (min-height: 299px) {
      .nav-wrapper {
        padding-bottom: 16px;
      }
    }

    @media (min-height: 650px) and (max-width: 414px) and
           (orientation: portrait) {
      .page-wrapper {
        margin-top: 10vh;
      }
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <iron-icon class="icon" icon="cr:security"></iron-icon>
    <div class="heading">$i18n{heading}</div>
    <p>$i18nRaw{primaryParagraph}</p>
    <div class="nav-wrapper">
      <button id="reset-password-button">
        $i18n{primaryButtonText}
      </button>
    </div>
  </div>
</body>
</html>
